<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="queryForm"
				:inline="true"
				:model="queryData"
				class="flex-warp-container"
			>
				<div style="display: inline-block;">
					<el-select
						v-model="searchAdminType"
						style="width: 130px;margin-right:-5px;margin-top:2px"
						:placeholder="$t('common.select_all')"
						:popper-append-to-body="false"
						@change="
							queryData.createdBy = ''
							queryData.updatedBy = ''
						"
					>
						<el-option
							:key="0"
							:label="$t('common.createBy')"
							:value="0"
						></el-option>
						<el-option
							:key="1"
							:label="$t('common.last_updateBy')"
							:value="1"
						></el-option>
					</el-select>
					<el-form-item v-if="!searchAdminType" prop="createdBy">
						<el-input
							v-model="queryData.createdBy"
							clearable
							:maxlength="20"
							size="medium"
							style="width: 200px"
							v-input="{ name: 'symbols' }"
							:placeholder="$t('common.please_enter')"
						></el-input>
					</el-form-item>
					<el-form-item v-if="searchAdminType" prop="updatedBy">
						<el-input
							v-model="queryData.updatedBy"
							clearable
							:maxlength="20"
							size="medium"
							style="width: 200px"
							:placeholder="$t('common.please_enter')"
						></el-input>
					</el-form-item>
				</div>
				<el-form-item style="margin-left: 8px">
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('501011')"
						type="warning"
						icon="el-icon-folder"
						:disabled="loading"
						size="medium"
						@click="dialogFormVisible = true"
					>
						{{ $t('common.add') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="list"
				highlight-current-row
				:header-cell-style="getRowClass"
				:max-height="tableHeight"
			>
				<el-table-column
					prop="shutdownTime"
					align="center"
					label="停服时间"
					width="200px"
					show-overflow-tooltip
				></el-table-column>
				<el-table-column
					prop="status"
					align="center"
					label="状态"
					width="200px"
				>
					<template slot-scope="scope">
						{{ status[scope.row.status] }}
					</template>
				</el-table-column>
				<el-table-column
					prop="updatedAt"
					align="center"
					label="最后操作人"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>{{ scope.row.updatedBy || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="updatedAt"
					align="center"
					label="最后操作时间"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span>{{ scope.row.updatedAt || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作">
					<template slot-scope="scope">
						<div
							v-if="
								scope.row.status !== 4 && scope.row.status !== 5
							"
						>
							<el-button
								type="warning"
								size="medium"
								@click="handleCease(scope.row)"
							>
								{{ btns[scope.row.status].text }}
							</el-button>

							<el-button
								type="danger"
								size="medium"
								@click="handleCease(scope.row, 5)"
							>
								禁用
							</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<el-dialog
			title="停服计划"
			:visible.sync="dialogFormVisible"
			width="405px"
			center
			@close="clear"
		>
			<el-form ref="form" :model="form" label-width="100px">
				<el-form-item
					label="停服时间"
					prop="shutdownTime"
					:rules="[{ required: true, message: '请选择停服时间' }]"
				>
					<el-date-picker
						clearable
						v-model="form.shutdownTime"
						size="medium"
						type="datetime"
						placeholder="请选择停服时间"
						style="width: 240"
					></el-date-picker>
					<p style="color: #666;">配置前请与相关人员确认</p>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="handleClase">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button
					type="primary"
					:loading="fetchLoading"
					@click="handleCreate"
				>
					保存
				</el-button>
			</div>
		</el-dialog>
	</main-content>
</template>

<script>
import { routerNames } from '@/utils/consts'
import list from '@/mixins/list'
import { mapGetters } from 'vuex'
import dayjs from 'dayjs'
import MainContent from '@/components/MainContent/index.vue'

export default {
	name: routerNames.notice,
	components: { MainContent },
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			dialogFormVisible: false,
			status: {
				1: '待执行',
				2: '进行中',
				// 2: '已停服',
				3: '半开服',
				4: '已完成',
				5: '已禁用',
				null: '待执行'
			},
			btns: {
				0: {
					status: 2,
					text: '执行'
				},
				1: {
					status: 2,
					text: '执行'
				},
				2: {
					status: 3,
					text: '半开服'
				},
				3: {
					status: 4,
					text: '开服'
				},
				5: {
					status: 1,
					text: '禁用'
				},
				4: {
					status: 5,
					text: '禁用'
				},
				null: {
					status: 2,
					text: '停服'
				}
			},
			loading: false,
			searchAdminType: 0,
			fetchLoading: false,
			form: {
				shutdownTime: undefined
			},
			queryData: {
				updatedBy: undefined,
				createdBy: undefined
			},
			pageD: 1,
			sizeD: 10,
			summary: 0,
			merchantInfoA: {
				languages: 'zh_CN'
			}
			// pickerOptions: {
			// 	disabledDate(time) {
			// 		const now = dayjs()
			// 			.subtract(1, 'day')
			// 			.endOf('day')
			// 			.valueOf()
			// 		return time.getTime() < now
			// 	}
			// }
		}
	},
	computed: {
		...mapGetters(['merchantInfo']),
		blackStatusType() {
			return this.globalDics.blackStatusType || []
		},
		loginDeviceType() {
			return this.globalDics.loginDeviceType || []
		},
		userTypes() {
			return [
				{
					code: '1',
					description: this.$t('operation.specific_member')
				},
				{
					code: '0',
					description: this.$t('operation.all_member')
				}
			]
		}
	},
	mounted() {
		if (!this.$store.getters.isZk) {
			this.queryData.merchantId = this.$store.getters.merchantInfo.id
		}
		this.loadData()
	},
	methods: {
		confirm(text) {
			return this.$confirm(
				`<strong>
                    是否对该配置进行${text}操作？
                </strong></br>
                <span style='font-size:12px;color:#c1c1c1'>一旦操作将会立即生效</span>`,
				this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}
			)
		},
		async handleCease(row, status) {
			try {
				await this.confirm(this.btns[status || row?.status].text)
				await this.$api.shutdownMaintenanceUpdate({
					...row,
					status: status || this.btns[(row?.status)].status
				})
				this.search()
			} catch (err) {
				console.log(err)
			}
		},
		async handleClase() {
			this.dialogFormVisible = false
			this.form.shutdownTime = undefined
			this.$refs['form'].resetFields()
		},
		async handleCreate() {
			try {
				this.fetchLoading = true
				await this.$refs['form'].validate()
				const params = {
					shutdownTime: dayjs(this.form.shutdownTime).format(
						'YYYY-MM-DD HH:mm:ss'
					)
				}
				await this.$api.shutdownMaintenanceAdd(params)
				this.handleClase()
				this.search()
			} catch (err) {
				throw err
			} finally {
				this.fetchLoading = false
			}
		},
		// 改变列表条数
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.loadData()
		},
		handleCurrentChange(value) {
			this.pageNum = value
			this.loadData()
		},
		search() {
			this.pageNum = 1
			this.loadData()
		},
		loadData() {
			const params = {
				noticeType: 2,
				...this.getParams(this.queryData)
			}
			for (const k in params) {
				if (params[k] === '') {
					delete params[k]
				}
			}
			this.list = []
			this.loading = true
			this.$api
				.shutdownMaintenanceList(params)
				.then((res) => {
					const { record, totalRecord } = res.data || {}
					this.list = record || []
					this.total = totalRecord || 0

					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		reset() {
			this.queryData = {
				title: undefined,
				merchantId: undefined,
				sendObj: undefined,
				createdBy: undefined
			}
			if (!this.$store.getters.isZk) {
				this.queryData.merchantId = this.$store.getters.merchantInfo.id
			}
			this.pageNum = 1
			this.loadData()
		},
		clear() {
			this.$refs.form.resetFields()
		},
		handleCurrentChangeDialog(val) {
			this.pageD = val
			this.getOperateConfigNoticeSelectDetail()
		},
		handleSizeChangeDialog(val) {
			this.sizeD = val
			this.getOperateConfigNoticeSelectDetail()
		},

		filterTerminal(val) {
			const arr = val ? val.split(',') : []
			if (arr.length) {
				return arr
					.map((item) => this.typeFilter(item, 'clientType'))
					.join(',')
			}
			return '-'
		},
		joinDeviceTypeArr() {
			const arr = []
			this.loginDeviceType.forEach((item) => {
				arr.push(item.description)
			})
			return arr.length ? arr.join(',') : '-'
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
	border: 1px solid #dddddd;
}
::v-deep .tagheight {
	.el-form-item__content,
	.el-select {
		width: 480px;
	}
}
.tooltip-content {
	width: 250px;
}
.tooltip-trigger {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.decoration {
	// text-decoration: underline;
	cursor: pointer;
	color: #4b7902;
}
.fenye {
	text-align: center;
}

.vi_VN {
	.tagheight ::v-deep .el-form-item__content,
	.tagheight .el-select {
		width: 520px;
	}
}
</style>
<style>
.el-tooltip__popper {
	max-width: 300px !important;
}
</style>
